<template>
    <scroll-view :scroll-y="true" class="showPointsPageStyle" :style="{ paddingBottom: safeAreaInsets.bottom + 10 + 'px' }">
        <view v-for="(item,index) in planList" :key='index' class="itemStyle" >
            <view class="flex flex-column">
                <view style="font-size: 32rpx;color: #333;">签到积分</view>
                <view style="font-size: 24rpx;color: #999;margin-top: 12rpx;">{{ item.insertDate}}</view>
            </view>
            <view class="center">
                <image src="./static/signin/pointsIcon.svg" style="width: 28rpx;height: 24rpx;margin-right: 24rpx;"/>
                <view style="font-size: 30rpx;">+10</view>
            </view>
        </view>
        <u-loadmore :status="loadStatus" @loadmore="onLoadmore" />
    </scroll-view>
</template>

<script>

import { getScoreRecord } from './services/signInService';
export default {
    name: 'showPointsPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            // 数据源
            planList: [],
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
            queryData: {
                pageNo: 1,
                pageSize: 10
            }
        };
    },
    methods: {
        //加载更多触发
        onLoadmore() {
            this.queryData = {
                ...this.queryData,
                pageNo: this.queryData.pageNo + 1
            }
        },
        // 初始化数据
        onGetListData(queryData) {
            this.loadStatus = 'loading'
            console.log("47----")
            getScoreRecord(queryData).then(res => {
                let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
                // console.log(newListData)
                if (newListData.length >= res.totalCount) {
                    this.loadStatus = 'noMore'
                } else {
                    this.loadStatus = 'loadmore'
                }
                this.planList = newListData
            }).catch(err => {
                this.loadStatus = 'loadmore'
            })
        },
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
    },
    mounted() {
        // Add your mounted logic here
    },
    
    watch: {
        queryData: {
            handler: function (val, oldVal) {
                this.onGetListData(val)
            },
            deep: true,
            immediate:true,
        }
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
   computed:{
      
    }
};
</script>

<style scoped lang="scss">
    .showPointsPageStyle{
        background-color: #fff;
        padding: 20rpx 0;
        height: 100vh;
        box-sizing: border-box;
        .itemStyle{
            padding: 24rpx 42rpx;
            border-bottom:1rpx solid #F2F2F2;
            display: flex;
            justify-content: space-between;
        }
    }
</style>